<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>天勤</title>
    <link rel="stylesheet" rev="stylesheet" href="index.css" type="text/css">
</head>

<body>
    <header class="white">
        <div class="center">
            <div class="left">
                <button style="background-color: red; color: white;width: 80px; height: 25px;">LOGO</button>
            </div>
            <div class="right">
                <div>
                    <span>
                        <svg t="1670224563489" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2750" width="20" height="20">
                            <path
                                d="M940 596l-76-57.6c0.8-8 1.6-16.8 1.6-26.4s-0.8-18.4-1.6-26.4l76-57.6c20.8-16 26.4-44 12.8-68l-84.8-143.2c-9.6-16.8-28-27.2-47.2-27.2-6.4 0-12 0.8-18.4 3.2L712 228c-15.2-10.4-31.2-19.2-47.2-26.4l-13.6-92c-4-26.4-26.4-45.6-53.6-45.6H426.4c-27.2 0-49.6 19.2-53.6 44.8L360 201.6c-16 7.2-31.2 16-47.2 26.4l-90.4-35.2c-6.4-2.4-12.8-3.2-19.2-3.2-19.2 0-37.6 9.6-46.4 26.4L71.2 360c-13.6 22.4-8 52 12.8 68l76 57.6c-0.8 9.6-1.6 18.4-1.6 26.4s0 16.8 1.6 26.4l-76 57.6c-20.8 16-26.4 44-12.8 68l84.8 143.2c9.6 16.8 28 27.2 47.2 27.2 6.4 0 12-0.8 18.4-3.2L312 796c15.2 10.4 31.2 19.2 47.2 26.4l13.6 92c3.2 25.6 26.4 45.6 53.6 45.6h171.2c27.2 0 49.6-19.2 53.6-44.8l13.6-92.8c16-7.2 31.2-16 47.2-26.4l90.4 35.2c6.4 2.4 12.8 3.2 19.2 3.2 19.2 0 37.6-9.6 46.4-26.4l85.6-144.8c12.8-23.2 7.2-51.2-13.6-67.2zM704 512c0 105.6-86.4 192-192 192S320 617.6 320 512s86.4-192 192-192 192 86.4 192 192z"
                                p-id="2751"></path>
                        </svg>
                    </span>
                    &nbsp;
                    <span>
                        <svg t="1670224671969" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3693" width="20" height="20">
                            <path
                                d="M889.828994 749.637494c-1.204099-1.720141-119.205779-165.821603-119.205779-287.435579 0-168.401814-76.202251-254.752898-162.725349-286.919536L607.897867 159.973123c0-52.980346-43.175542-95.983874-95.983874-95.983874S415.930119 107.164791 415.930119 159.973123l0 15.309256c-86.523098 32.166639-162.725349 118.517722-162.725349 286.919536 0 121.269948-118.00168 285.199395-119.205779 286.919536-5.332437 7.568621-7.396607 16.857383-5.332437 25.974131 2.064169 8.944734 7.912649 16.685369 15.997312 20.985721 5.676466 3.096254 107.336805 57.280699 233.423148 84.458928 21.32975 66.397447 73.966068 111.29313 133.654964 111.29313s112.325214-44.895683 133.654964-111.29313c126.086343-27.178229 227.746682-81.018646 233.423148-83.942886 8.256677-4.472367 13.933143-12.040988 16.169326-20.985721C897.225601 766.666891 895.333445 757.206115 889.828994 749.637494zM479.919368 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625 17.545439 0 31.994625 14.449185 31.994625 31.994625l0 0.860071c-7.224593-0.516042-14.277171-0.860071-21.32975-0.860071l-21.32975 0c-7.052579 0-14.105157 0.344028-21.32975 0.860071L479.919368 159.973123 479.919368 159.973123zM511.913993 928.016126c-22.361834 0-43.175542-13.417101-57.968755-35.262893 19.26558 2.064169 38.531161 3.268268 57.968755 3.268268s38.875189-1.376113 57.968755-3.268268C555.089535 914.599026 534.275827 928.016126 511.913993 928.016126z"
                                p-id="3694"></path>
                        </svg>
                    </span>
                    &nbsp;&nbsp;&nbsp;&nbsp;

                    <span><button style="background-color: red; color: white;width: 80px;height: 30px;">Log
                            Out</button></span>
                </div>

            </div>
        </div>
    </header>
    <main class="gray">
        <div class="center">
            <div class="nav">
                <p style="font-weight: 200;font-size: 34px;color: #575c5f;">Audience Overview</p>
                <div class="nav_footer">
                    <div style=" font-weight: 200;color:#575c5f;">Roseville,CA</div>
                    <div class="nav_menu">
                        <div>
                            DASHBOARD
                        </div>
                        <div>
                            PROJECTS
                        </div>
                        <div>
                            CALENDAR
                        </div>
                        <div>
                            MAILBOX
                        </div>
                        <div>
                            SETTINGS
                        </div>
                    </div>
                </div>
            </div>
            <div class="ad">
                <div class="left white">
                    <ul class="slider_container" style="left: 0px;">
                        <li id="slider_item"><img src="images/1.png" /></li>
                        <li><img src="images/2.png" /></li>
                        <li><img src="images/3.png" /></li>
                        <li><img src="images/4.png" /></li>
                        <li><img src="images/5.png" /></li>
                    </ul>
                    <div class="slider_controller">
                        <span id="slider_controller_left">
                            < </span>
                                <span id="slider_controller_right"> > </span>
                    </div>
                    <div class="slider_point">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="right white">
                    <div class="top">
                        <div style="float:left;height: 100%;line-height: 500%;font-size: 20px;">Support Requests</div>
                        <div style="float:right;height: 100%;line-height: 500%;"><button
                                style="background-color: white;border: 1px solid #d2d2d6; font-size: 13px;width: 75px; height: 35px;">View
                                All</button></div>
                    </div>
                    <div class="bottom">
                        <table cellspacing=0 width="100%">
                            <th style="text-align: left;">TIME</th>
                            <th style="text-align: left;">USER NAME</th>
                            <th style="text-align: left;">STATUS</th>
                            <tr>
                                <td>9:45pm</td>
                                <td>info@design.com</td>
                                <td><span
                                        style="display: block; text-align: center; background-color: #57d14b; color: white;width: 66%;height: 28px;line-height: 28px;">Solved</span>
                                </td>
                            </tr>
                            <tr>
                                <td>9:45pm</td>
                                <td>info@design.com</td>
                                <td><span
                                        style="display: block; text-align: center;background-color: #57d14b; color: white;width: 66%;height: 28px;line-height: 28px;">Solved</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="graph">
                <div id="chart1" style="width:100%; height: 100%;">

                </div>
            </div>
            <div class="table">
                <div class="left">
                    <div id="chart2" style="width:100%; height: 100%;"></div>
                </div>
                <div class="right">
                    <div id="chart3" style="width:100%; height: 100%;"></div>
                </div>
            </div>
        </div>
    </main>
    <footer class="black">
        <div class="center">
            <div class="section">
                <button style="background-color: red; color: white;width: 80px; height: 25px;">LOGO</button>
            </div>
            <div class="section">
                <b>NEWS</b>
                <ul>
                    <li>CSS</li>
                    <li>HTML</li>
                    <li>JS</li>
                </ul>
            </div>
            <div class="section">
                <b>SPORT</b>
                <ul>
                    <li>VUE</li>
                    <li>NODEJS</li>
                    <li>ELEMENTUI</li>
                </ul>
            </div>
            <div class="section">
                <b>WEATHER</b>
                <ul>
                    <li>C</li>
                    <li>C++</li>
                    <li>JAVA</li>
                </ul>
            </div>
            <div class="section">
                <b>FUTURE</b>
                <ul>
                    <li>SSM</li>
                    <li>SPRINGBOOT</li>
                    <li>PYTHON</li>
                </ul>
            </div>
            <div class="section">
                <b>TRAVEL</b>
                <ul>
                    <li>GAVA</li>
                </ul>
            </div>
        </div>
    </footer>
</body>

</html>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="index.js"></script>